<template>
    <div class="newsInfo-container">
        <h3 class="title">{{newsInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间: {{newsInfo.add_time |dateFormat}}</span>
            <span>点击: {{newsInfo.click}} 次</span>
        </p>
        <hr>
        <!--正文-->
        <div class="content" v-html="newsInfo.content"></div>
        <!--评论区-->
        <comment-box :id="id"></comment-box>
    </div>
</template>

<script>
    import connector from '../../base/interface.js';
    import { Toast } from 'mint-ui';

    /*导入评论子组件*/
    import comment from '../comment.vue';
    export default {
        data(){
            return{
                id:this.$route.params.id,
                /*新闻对象*/
                newsInfo:{}
            }
        },methods:{
            getnewsInfo(){
                /*获取新闻详情数据*/
                connector.getNewsInfo(this.id).then(result=>{
                    this.newsInfo=result;
                },err=>{console.log(err.message)});
            }
        },created() {
            this.getnewsInfo();
        },components:{
            "commentBox":comment
        }
    }
</script>

<style lang="scss" scoped>
    img{
        width: 100%;
    }
@import "../../base/baseRem.scss";
.newsInfo-container{
    padding: 0 remFu(4);
    .title{
        font-size: 17px;
        text-align: center;
        margin: remFu(15) 0;
        color: red;
    }
    .subtitle{
        font-size: 13px;
        color:#226aff ;
        display: flex;
        justify-content:space-between;
    }
}
</style>